import { watch, ref, computed, onBeforeMount } from 'vue';
import { useStore } from 'vuex';

export default function useTheme() {
    const store = useStore();

    let curThemeClassName = '';
    function updateBodyClassName(theme = '') {
        if (curThemeClassName) {
            document.body.classList.remove(curThemeClassName);
        }
        curThemeClassName = `theme-${theme}`;
        document.body.classList.add(curThemeClassName);
    }

    const theme = computed(() => store.state.puma.theme);
    watch(ref(theme), (value) => {
        updateBodyClassName(value);
    });
    const _initTheme = () => {
        updateBodyClassName(theme.value);
    };
    onBeforeMount(() => {
        _initTheme();
    });
}
